<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 객체</title>
<style type="text/css">
	div {border: 1px solid black; margin: 5px;}
</style>
<script type="text/javascript">
	var ctrl = {
			// block 엘리먼트로 설정하도록 합니다.
			block: function(el){
				el.style.display = 'block';
			},
			// inline 엘리먼트로 설정하도록 합니다.
			inline: function(el){
				el.style.display = 'inline';
			},
			// 적용할 때마다 block, inline을 번갈아 적용하도록 합니다.
			toggle: function(elem){
				if (elem.style.display === 'block') {
					ctrl.inline(elem);
				} else {
					ctrl.block(elem);
				}
			}
	};
</script>
</head>
<body>
	<div>
		sample 1 글자를 클릭해 보세요.
		<span style="color: red; cursor: pointer;" onclick="ctrl.toggle(this);">
			여기</span>를 클릭하는 거에요.
	</div>
	<div>
		sample 2 글자를 클릭해 보세요.
		<span style="color: red; cursor: pointer;" onclick="ctrl.toggle(this);">
			여기</span>를 클릭하는 거에요.
	</div>
</body>
</html>